// react根组件
import React, { Component } from 'react'

// 导入
// import Items from './components/Items'
// 导入类组件 组件的首字母必须是大写
// import Itemclass from './components/Itemclass'
// import Userthis from './components/Userthis'
// import CmpState from './components/CmpState'

// import SubCmp from './components/SubCmp'

// 列表组件
import CartItem from './components/CartItem'




// 状态组件 React.Component
class App extends Component {

  // 父传子  props  传任意数据
  // 子传父  props

  state = {
    // count: 100
    carts: [
      { id: 1, name: '商品名1', price: 100, num: 1 },
      { id: 2, name: '商品名2', price: 200, num: 1 },
      { id: 3, name: '商品名3', price: 300, num: 1 }
    ]
  }


  render() {
    return (
      <div>
        {/* <Items title="我父组件给你的信息" num={100} bool={true} /> */}
        {/* <hr/> */}
        {/* <Itemclass title="我父组件给你的信息" /> */}
        {/* <Userthis title="我父组件给你的信息" /> */}

        {/* <CmpState username='张明' /> */}
        {/* <SubCmp count={this.state.count} fnIncr={this.fnIncr.bind(this)} /> */}

        <ul>
          {
            this.state.carts.map(item => (
              <CartItem key={item.id} item={item}></CartItem>
            ))
          }
        </ul>


      </div>
    )
  }

  fnIncr() {

    this.setState(state => ({
      count: ++state.count
    }))
  }
}

export default App


/*
// 标准写法
function App() {
  return (
    <div>
      我是一个根组件
    </div>
  );
}
export default App */

/*
// es6 箭头函数
const App = () => {
  return (
    <div>
      我是一个根组件
    </div>
  )
}
export default App */

// 把导出写在一行了
/* export default () => {
  return (
    <div>
      我是一个根组件!!!!
    </div>
  )
}
 */























/*
class A extends B{

  // 构造方法
  constructor(){
    // 继承父类的构造方法
    super()
  }

  // 成员属性
  a = 1

  // 成员方法
  bb(){
    // 此处用this
  }

  // 静态方法
  static aa(){
    // 不可用this
  }
}
*/